<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/resources/js/jquery-1.11.1.min.js"></script>
    <script src="/resources/js/self.js"></script>
    <script type="text/javascript" src="/resources/js/md5.js"></script>
    <script type="text/javascript" src="/resources/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="/resources/js/ajaxfileupload.js"></script>
    <script type="text/javascript" src="/resources/js/Util.js?r=4"></script>
    <script type="text/javascript" src="/resources/js/tdt.js?r=113"></script>
    <script type="text/javascript" src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/ImageOverlay.js"></script>
</head>
<body>
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>地图 <small>维护</small></h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Settings 1</a>
                            </li>
                            <li><a href="#">Settings 2</a>
                            </li>
                        </ul>
                    </li>
                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <br>
                <div id="demo-form2"  class="form-horizontal form-label-left" >
                    <div style="width: 40%;float: left">
                        <input type="hidden" name="id" class="form-data" >
                        <input type="hidden" name="communityId" class="form-data" >
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">公司名称
                            </label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="text" id="name" name="name" readonly
                                       class="form-control form-data col-md-7 col-xs-12" >
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="fileUpload">图示
                            </label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <button id="uploadBtn" onclick="$('#fileUpload').click();" class="btn btn-success">上传文件</button>
                                <input type="file" name="file" multiple="true" accept="image/*" id="fileUpload" style="display:none"
                                       onchange="uploadFile('fileUpload','image', 'imgDiv', 200, '','image',setImage);"/>
                                <div id="imgDiv" style="padding-top: 23px">
                                    <img src="" style="cursor: pointer; width:200px;" onclick="deleteImage(event,this)" title="" />
                                </div>
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="bLongitude">上经度
                            </label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="text" id="bLongitude" name="bLongitude"
                                       class="form-control form-data col-md-7 col-xs-12" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="bLatitude">上纬度
                            </label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="text" id="bLatitude" name="bLatitude"
                                       class="form-control form-data col-md-7 col-xs-12" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="eLongitude">下经度
                            </label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="text" id="eLongitude" name="eLongitude"
                                       class="form-control form-data col-md-7 col-xs-12" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="eLatitude">下纬度
                            </label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="text" id="eLatitude" name="eLatitude"
                                       class="form-control form-data col-md-7 col-xs-12" >
                            </div>
                        </div>
                        <div class="ln_solid"></div>
                        <div class="form-group">
                            <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">

                                <button onclick="save()" class="btn btn-success">提交</button>
                                <button onclick="back()" class="btn btn-primary" type="button">取消</button>
                            </div>
                        </div>
                    </div>
                    <div style="width: 60%;height:100%;min-height: 400px;float: right">

                        <div id="allmap" style="min-height: 300px;min-width:400px;height:100%;width:100%;"></div>
                        <div id="searchPanel" style="position: absolute;top:20px;z-index:999;background-color: #fff;margin-left-left: 20px;padding:3px">
                            <input type="text" id="keyWord" value=""/>
                            <!-- 提示词面板 -->
                            <div id="promptDiv" class="prompt"></div>
                            <!-- 统计面板 -->
                            <div id="statisticsDiv" class="statistics"></div>
                            <!-- 建议词面板 -->
                            <div id="suggestsDiv" class="suggests"></div>
                            <!-- 公交提示面板 -->
                            <div id="lineDataDiv" class="lineData"></div>
                            <!-- 搜索结果面板 -->
                            <div id="resultDiv" class="result">
                                <div id="searchDiv"></div>

                            </div>
                        </div>
                        <div>
                            <button  onclick="getRang()">选取区域</button>
                            <button  onclick="removeRang()">清除区域</button>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var map =null;
    var rectTool =null;
    var imageOverLay =null;
    var zoom = 12;
    var icon = new T.Icon({
        iconUrl: "http://wy.pa1.cn/resources/image/web-cam.png",
        iconSize: new T.Point(25, 25),
        iconAnchor: new T.Point(25, 25)
    });
    $(function () {
        initMap();
        initData();
        setImage();
    });



    function initMap() {
        var imageURL = "http://t0.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=611c56de6afcba460edbcbbbd3009445}";
        //创建自定义图层对象
        lay = new T.TileLayer(imageURL, {minZoom: 1, maxZoom: 18});
        var config = {layers: [lay]};
        map = new  T.Map('allmap',config);

        map.setMapType(TMAP_HYBRID_MAP);
        var setLongitude = $("#longitude").val();
        var setlatitude = $("#latitude").val();
        var name = $("#latitude").val();
        if(isNullOrUndefined(name)){
            name ="监控点";
        }
        if(!isNullOrUndefined(setLongitude) &&!isNullOrUndefined(setlatitude) ){
            map.centerAndZoom(new T.LngLat(setLongitude,setlatitude), 22);

            var marker = new T.Marker(new T.LngLat(setLongitude,setlatitude), {title: name,icon: icon});
            map.addOverLay(marker);
        }else {
            map.centerAndZoom(new T.LngLat(118.56903,37.57433), zoom);
        }


        var ctrl = new T.Control.MapType();
        //添加控件
        map.addControl(ctrl);
        var searchConfig = {
            pageCapacity: 10,	//每页显示的数量
            onSearchComplete: localSearchResult	//接收数据的回调函数
        };
        //创建搜索对象
        localsearch = new T.LocalSearch(map, searchConfig);
        $("#keyWord").keyup(function () {
            bounds = T.LngLatBounds(new T.LngLat(117.84348,37.47577),new T.LngLat(118.1456,37.32085));
            localsearch.searchInBounds(document.getElementById('keyWord').value,bounds);
        });
        $("#keyWord").blur(function () {
            setTimeout("clearSearchPanel ()","800");
        });
        rectTool = new T.RectangleTool(map);

        rectTool.addEventListener("draw", function(e){
            var lq =  e.currentBounds.Lq;
            var kq = e.currentBounds.kq;
            $("#bLongitude").val(lq.lng);
            $("#bLatitude").val(lq.lat);

            $("#eLongitude").val(kq.lng);
            $("#eLatitude").val(kq.lat);
            setImage();
            rectTool.close();
        })
    }
    function getRang() {
        rectTool.open();
    }
    function removeRang() {
        rectTool.clear();
        if(imageOverLay!=null){
            map.removeOverLay(imageOverLay);
        }
    }
    function initData(){
        var data = getData();
        var id = data.id;

        if(null2empty(id) !=""){
            $("input[name='id']").val(id);
            $.ajax({
                url:"/admin/company/find.do",
                data:{'id':id},
                type:'post',
                async:false,
                dataType:'json',
                success:function(data){
                    console.log(data);
                    if(data.success){
                        initPageDate(data.data, '.form-data');
                        if(!isNullOrUndefined(data.data.mapImage)){
                            $("#imgDiv img").attr("src",data.data.mapImage);
                        }
                        setImage();


                    }
                }
            });
            $("#account").attr('readonly','readonly');
        }

    }
    function save() {
        var params = getPageDataByClass("form-data");

        var img = $("#imgDiv img");
        if(img.length > 0) {
            params['mapImage'] = $(img[0]).attr("src");
        }else{
            alert("请选择录入图片");
            return;
        }
        if (strIsNull(params['bLatitude'])) {
            alert("区域参数不完整");
            return;
        }
        if (strIsNull(params['bLongitude'])) {
            alert("区域参数不完整");
            return;
        }
        if (strIsNull(params['eLatitude'])) {
            alert("区域参数不完整");
            return;
        }
        if (strIsNull(params['eLongitude'])) {
            alert("区域参数不完整");
            return;
        }
        $.ajax({
            url: "/admin/company/save.do",
            data: params,
            dataType: 'json',
            type: 'post',
            success: function (data) {
                console.log(data);
                if (data.success) {
                    alert("保存成功");
                    var data = getData();
                    goto(data.back_url,data);
                } else {
                    alert(data.msg);
                }
            },
            error:function (request) {
                alert("系统异常");
            }

        });
    }
    function back() {
        goto("monitor_video_list.html", {},true);
    }
    function setImage() {
       var  bLongitude =$("#bLongitude").val();
       var bLatitude = $("#bLatitude").val();
        var eLongitude= $("#eLongitude").val();
        var eLatitude= $("#eLatitude").val();
        var imageUrl ="";
        var img = $("#imgDiv img");
        if(img.length > 0) {
            imageUrl =   $(img[0]).attr("src");
        }
        if(imageOverLay!=null){
            map.removeOverLay(imageOverLay);
        }
        if(!isNullOrUndefined(bLongitude) &&
            !isNullOrUndefined(bLatitude)&&
            !isNullOrUndefined(eLongitude)&&
            !isNullOrUndefined(eLatitude)&&
            !isNullOrUndefined(imageUrl)){
            var bd = new T.LngLatBounds(
                new T.LngLat(bLongitude, bLatitude),
                new T.LngLat(eLongitude, eLatitude));
            imageOverLay = new T.ImageOverlay(imageUrl, bd, {
                opacity: 1,
                alt: ""
            });
            map.addOverLay(imageOverLay);
        }
    }
</script>



</html>